<template>
  <div class="meter-device-box">
    <el-descriptions :column="2">
      <el-descriptions-item label="设备编码">{{ formData.deviceCode }}</el-descriptions-item>
      <el-descriptions-item label="设备名称">{{ formData.deviceName }}</el-descriptions-item>
      <el-descriptions-item label="设备类型">{{ formData.deviceTypeName }}</el-descriptions-item>
      <el-descriptions-item label="当前状态">{{ formData.deviceStatusName }}</el-descriptions-item>
      <el-descriptions-item label="是否重点关注设备">{{ formData.isFocusName }}</el-descriptions-item>
      <el-descriptions-item label="所属项目">{{ formData.projectName }}</el-descriptions-item>
      <el-descriptions-item label="所属场景">{{ formData.sceneInfoName }}</el-descriptions-item>
      <el-descriptions-item label="读表类型">{{ formData.readMeterTypeName }}</el-descriptions-item>
      <el-descriptions-item label="能耗类型">{{ formData.energyTypeName }}</el-descriptions-item>
      <el-descriptions-item label="读表标识">{{ formData.readMeterTagName }}</el-descriptions-item>
      <el-descriptions-item label="统计类型">{{ formData.staticsTypeName }}</el-descriptions-item>
      <el-descriptions-item label="统计产品类型">{{ formData.productTypeName }}</el-descriptions-item>
      <el-descriptions-item label="关联设备参数">{{ formData.modelName }}</el-descriptions-item>
      <el-descriptions-item label="删除图标">{{ formData.delFlagName }}</el-descriptions-item>
      <el-descriptions-item label="启用状态">{{ formData.statusName }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { dictMixin } from '@/mixin/dict'
import api from '@/api/apis/sceneRoom'
import { parseSceneData, parseToSceneInfo, sceneInfoToParam } from '@/utils/scene-data'

export default {
  name: 'AddMeterDevice',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        meterType: '',
        sceneInfo: []
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.formData = data
        console.log(data)
      },
      deep: true,
      immediate: true
    },
    confirm() {
      this.submit()
    }
  },
  methods: {
    submit() {
      this.$emit('onFinish', 'meter-device-detail')
    }
  }
}
</script>

<style lang="scss" scoped>
.meter-device-box {
  color: #333;
  padding: 0 20px;

  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
      width: calc(50% - 10px);

      &.width100p {
        width: 100%;
      }

      .el-form-item__label {
        color: #666;
        font-size: 14px;
      }

      &.form-sub-title {
        width: 100%;

        .el-form-item__label {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: bold;
          color: #333;
          font-size: 16px;
          line-height: 1;

          &::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 15px;
            background-color: #00858d;
            margin-right: 5px;
          }
        }
      }
    }

    .el-select,
    .el-cascader {
      width: 100%;
    }
  }
}
</style>
